<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorate="~{admin/layout/parent}">
<head>
	<title id="pageTitle">素材管理</title>
	<link th:href="@{/assets/plugins/footable/css/footable.core.css}" rel="stylesheet" type="text/css"/>
</head>
<body>
<th:block layout:fragment="page-content">
	<div class="row">
		<div class="col-sm-4">
			<div class="widget-panel widget-style-2 bg-white">
				<h2 class="m-0 text-dark counter font-600">[(${mpMaterialNum}?(${mpMaterialNum.longMaterialNum}?${mpMaterialNum.longMaterialNum}:0):0)]</h2>
				<div class="text-muted m-t-5">获取永久素材次数</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="widget-panel widget-style-2 bg-white">
				<h2 class="m-0 text-dark counter font-600">[(${mpMaterialNum}?(${mpMaterialNum.listLongMaterialNum}?${mpMaterialNum.listLongMaterialNum}:0):0)]</h2>
				<div class="text-muted m-t-5">获取永久素材列表次数</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="widget-panel widget-style-2 bg-white">
				<h2 class="m-0 text-dark counter font-600">[(${mpMaterialNum}?(${mpMaterialNum.materialCountNum}?${mpMaterialNum.materialCountNum}:0):0)]</h2>
				<div class="text-muted m-t-5">获取素材总数次数</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<ul class="nav nav-tabs navtab-bg nav-justified">
				<li class="active">
					<a href="#news" data-toggle="tab" aria-expanded="true"> 
						<span>图文</span>
						<span class="badge badge-info">[(${#lists.size(news)})]</span>
					</a>
				</li>
				<li class="">
					<a href="#image" data-toggle="tab" aria-expanded="false"> 
						<span>图片</span>
						<span class="badge badge-info">[(${#lists.size(image)})]</span>
					</a>
				</li>
				<li class="">
					<a href="#video" data-toggle="tab" aria-expanded="false">
						<span>视频</span>
						<span class="badge badge-info">[(${#lists.size(video)})]</span>
					</a>
				</li>
				<li class="">
					<a href="#voice" data-toggle="tab" aria-expanded="false"> 
						<span>语音</span>
						<span class="badge badge-info">[(${#lists.size(voice)})]</span>
					</a>
				</li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active" id="news">
					
					<div class="row">
						<div class="col-sm-12">
							<button id="btn-async-news" class="ladda-button btn btn-primary" data-style="expand-left" data-url="/admin/mp/material/async/news"><i class="fa fa-refresh"></i> 同步图文素材</button>
						</div>
					</div>
					<th:block th:if="${#lists.size(news)} == 0">
						<h2 class="text-center p-30 text-muted">暂无图文素材</h2>
					</th:block>
					<th:block th:if="${#lists.size(news)} > 0">
						<div class="table-rep-plugin m-t-15">
							<div class="table-responsive" data-pattern="priority-columns">
								<table id="news-table" class="table m-b-0 toggle-arrow-tiny" data-page-size="10">
									<thead>
										<tr>
											<th>MediaId</th>
											<th data-priority="1">标题</th>
											<th data-priority="1">描述</th>
											<th data-priority="1">URL</th>
											<th data-priority="1">更新时间</th>
										</tr>
									</thead>
									<tbody>
										<th:block th:each="_news : ${news}">
											<th:block th:each="article,articleStat : ${_news.articles}" >
												<th:block th:if="${articleStat.index} == 0">
													<tr>
														<th>[(${_news.mediaId})]</th>
														<td>[(${article.title})]</td>
														<td>[(${article.digest})]</td>
														<td><a th:href="${article.url}" target="_blank">访问公众平台内容</a></td>
														<th>[(${_news.updateTime})]</th>
													</tr>
												</th:block>
											</th:block>
										</th:block>
									</tbody>
									<tfoot>
										<tr>
											<td colspan="5">
												<label class="form-inline">
													<select id="news-table-entries" class="form-control input-sm">
														<option value="10">10</option>
														<option value="20">20</option>
														<option value="50">50</option>
														<option value="100">100</option>
													</select>
												</label>
												<ul class="pagination pagination-split pull-right"></ul>
											</td>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>
					</th:block>
				</div>
				<div class="tab-pane " id="image">
					<div class="row">
						<div class="col-sm-12">
							<button id="btn-async-image" class="ladda-button btn btn-primary" data-style="expand-left" data-url="/admin/mp/material/async/image"><i class="fa fa-refresh"></i> 同步图片素材</button>
						</div>
					</div>
					<th:block th:if="${#lists.size(image)} == 0">
						<h2 class="text-center p-30 text-muted">暂无图片素材</h2>
					</th:block>
					<th:block th:if="${#lists.size(image)} > 0">
						<div class="table-rep-plugin m-t-15">
							<div class="table-responsive" data-pattern="priority-columns">
								<table id="image-table" class="table  table-striped">
									<thead>
										<tr>
											<th>MediaId</th>
											<th data-priority="1">名称</th>
											<th data-priority="1">URL</th>
											<th data-priority="1">更新时间</th>
										</tr>
									</thead>
									<tbody>
										<th:block th:each="file : ${image}">
											<tr>
												<th>[(${file.mediaId})]</th>
												<td>[(${file.name})]</td>
												<td><a th:href="${file.url}" target="_blank">访问公众平台内容</a></td>
												<th>[(${file.updateTime})]</th>
											</tr>
										</th:block>
									</tbody>
									<tfoot>
										<tr>
											<td colspan="5">
												<label class="form-inline">
													<select id="image-table-entries" class="form-control input-sm">
														<option value="10">10</option>
														<option value="20">20</option>
														<option value="50">50</option>
														<option value="100">100</option>
													</select>
												</label>
												<ul class="pagination pagination-split pull-right"></ul>
											</td>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>
					</th:block>
				</div>
				<div class="tab-pane" id="video">
					<div class="row">
						<div class="col-sm-12">
							<button id="btn-async-video" class="ladda-button btn btn-primary" data-style="expand-left" data-url="/admin/mp/material/async/video"><i class="fa fa-refresh"></i> 同步视频素材</button>
						</div>
					</div>
					<th:block th:if="${#lists.size(video)} == 0">
						<h2 class="text-center p-30 text-muted">暂无视频素材</h2>
					</th:block>
					<th:block th:if="${#lists.size(video)} > 0">
						<div class="table-rep-plugin m-t-15">
							<div class="table-responsive" data-pattern="priority-columns">
								<table id="video-table" class="table  table-striped">
									<thead>
										<tr>
											<th>MediaId</th>
											<th data-priority="1">名称</th>
											<th data-priority="1">更新时间</th>
										</tr>
									</thead>
									<tbody>
										<th:block th:each="file : ${video}">
											<tr>
												<th>[(${file.mediaId})]</th>
												<td>[(${file.name})]</td>
												<th>[(${file.updateTime})]</th>
											</tr>
										</th:block>
									</tbody>
									<tfoot>
										<tr>
											<td colspan="5">
												<label class="form-inline">
													<select id="video-table-entries" class="form-control input-sm">
														<option value="10">10</option>
														<option value="20">20</option>
														<option value="50">50</option>
														<option value="100">100</option>
													</select>
												</label>
												<ul class="pagination pagination-split pull-right"></ul>
											</td>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>
					</th:block>
				</div>
				<div class="tab-pane" id="voice">
					<div class="row">
						<div class="col-sm-12">
							<button id="btn-async-voice" class="ladda-button btn btn-primary" data-style="expand-left" data-url="/admin/mp/material/async/voice"><i class="fa fa-refresh"></i> 同步语音素材</button>
						</div>
					</div>
					<th:block th:if="${#lists.size(voice)} == 0">
						<h2 class="text-center p-30 text-muted">暂无语音素材</h2>
					</th:block>
					<th:block th:if="${#lists.size(voice)} > 0">
						<div class="table-rep-plugin m-t-15">
							<div class="table-responsive" data-pattern="priority-columns">
								<table id="voice-table" class="table  table-striped">
									<thead>
										<tr>
											<th>MediaId</th>
											<th data-priority="1">名称</th>
											<th data-priority="1">更新时间</th>
										</tr>
									</thead>
									<tbody>
										<th:block th:each="file : ${voice}">
											<tr>
												<th>[(${file.mediaId})]</th>
												<td>[(${file.name})]</td>
												<th>[(${file.updateTime})]</th>
											</tr>
										</th:block>
									</tbody>
									<tfoot>
										<tr>
											<td colspan="5">
												<label class="form-inline">
													<select id="video-table-entries" class="form-control input-sm">
														<option value="10">10</option>
														<option value="20">20</option>
														<option value="50">50</option>
														<option value="100">100</option>
													</select>
												</label>
												<ul class="pagination pagination-split pull-right"></ul>
											</td>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>
					</th:block>
				</div>
			</div>
		</div>
	</div>
</th:block>
<th:block layout:fragment="page-plugin">
    <script th:src="@{/assets/plugins/footable/js/footable.all.min.js}"></script>
</th:block>
<th:block layout:fragment="page-js">
<script th:src="@{/page/admin/mp/material.js}" type="text/javascript"></script>
</th:block>
</body>
</html>
